<template>
	<div class="header-box">
		<div class="header-left">
			<img src="@/assets/images/logo.png" alt="" />
		</div>
		<div class="header-center">中安后台管理系统</div>
		<div class="header-right">
			<el-avatar :size="30" :src="user.imgUrl" />
			<b>{{ user.name }}</b>
			<img src="@/assets/images/loginout.png" alt="" @click="loginOut" />
		</div>
	</div>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const user = reactive({
	name: '用户名',
	imgUrl: ''
});
const loginOut = () => {
	ElMessageBox.confirm('是否要退出登录?', '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {})
		.catch(() => {});
};
</script>

<style lang="scss">
.header-box {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #303133;
	box-sizing: border-box;
	padding: 10px 20px;
	overflow: hidden;
	color: #fff;
	.header-left {
		display: flex;
		height: 100%;
		img {
			height: 100%;
		}
	}
	.header-center {
		font-size: 18px;
		letter-spacing: 2px;
		// font-weight: 600;
	}
	.header-right {
		display: flex;
		align-items: center;
		font-size: 14px;
		img {
			width: 22px;
			cursor: pointer;
		}
		b {
			font-weight: normal;
			margin: 0 20px;
		}
	}
}
</style>